﻿@using Microsoft.JSInterop
@inject IJSRuntime JSRuntime

<div class="container-fluid">
    <div class="row p-3">
        <div class="col">
            <RadzenCard class="mb-4">
                <RadzenCheckBox @bind-Value=@showMadridMarker Name="showMarker" />
                <RadzenLabel Text="Show marker for Madrid" Component="showMarker" Style="margin-left: 8px; vertical-align: middle;" />
            </RadzenCard>
                <RadzenGoogleMap @ref=map style="height: 400px" Options=@(new Dictionary<string, object> { { "disableDoubleClickZoom", true } })
                    Zoom=@zoom Center=@(new GoogleMapPosition() { Lat = 42.6977, Lng = 23.3219 }) MapClick=@OnMapClick MarkerClick=@OnMarkerClick>
                <Markers>
                    <RadzenGoogleMapMarker Title="London" Label="London" Position=@(new GoogleMapPosition() { Lat = 51.5074, Lng = 0.1278 }) />
                    <RadzenGoogleMapMarker Title="Paris " Label="Paris" Position=@(new GoogleMapPosition() { Lat = 48.8566, Lng = 2.3522 }) />
                    @if (showMadridMarker)
                    { 
                        <RadzenGoogleMapMarker Title="Madrid " Label="Madrid" Position=@(new GoogleMapPosition() { Lat = 40.4168, Lng = -3.7038 }) />
                    }
                </Markers>
            </RadzenGoogleMap>
        </div>
    </div>
</div>

<EventConsole @ref=@console />

@code {
    int zoom = 3;
    bool showMadridMarker;
    EventConsole console;
    RadzenGoogleMap map;

    void OnMapClick(GoogleMapClickEventArgs args)
    {
        console.Log($"Map clicked at Lat: {args.Position.Lat}, Lng: {args.Position.Lng}");
    }

    async Task OnMarkerClick(RadzenGoogleMapMarker marker)
    {
        var message = $"Custom information about <b>{marker.Title}</b>";

        var code = $@"
var map = Radzen['{map.UniqueID}'].instance;
var marker = map.markers.find(m => m.title == '{marker.Title}');
if(window.infoWindow) {{window.infoWindow.close();}}
window.infoWindow = new google.maps.InfoWindow({{content: '{message}'}});
setTimeout(() => window.infoWindow.open(map, marker), 200);
";

        await JSRuntime.InvokeVoidAsync("eval", code);
    }
}